<template>
  <div class="app-container">
    <el-row class="toolbar">
      <el-col :span="24">  <el-button type="primary" @click="showAddRoleDialog" v-if="hasPermission('system:role:add')">添加角色</el-button></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="list" element-loading-text="Loading" fit highlight-current-row>
          <el-table-column label='序号' width="95" type="index">
          </el-table-column>
          <el-table-column label="角色名称" prop="name">
          </el-table-column>
          <el-table-column label="角色代码" align="center" prop="roleKey">
          </el-table-column>
          <el-table-column label="所在分组" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.groupId==0?'用户角色':'管理角色'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="small" type="primary" @click="showEditRoleDialog(scope.row)"  v-if="hasPermission('system:role:update')">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row)" v-if="hasPermission('system:role:delete')">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>



    <el-dialog
    title="添加角色"
    :visible.sync="dialogVisible"
    width="40%"
    >
      <el-form :model="roleForm" ref="roleValidateForm" label-width="100px">
    <el-row :gutter="20">
      <el-col :span="14">
        <el-form-item label="角色分组" prop="groupId">
          <el-select v-model="roleForm.groupId" placeholder="请选择" @change="changeGroup">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
       </el-form-item>

         <el-form-item
           label="名称"
           prop="name"
           :rules="[{ required: true, message: '名称不能为空'}]"
         >
           <el-input v-model="roleForm.name" auto-complete="off"></el-input>
         </el-form-item>
         <el-form-item
           label="角色代码"
           prop="roleKey"
           :rules="[{ required: true, message: '角色代码不能为空'}]"
         >
           <el-input v-model="roleForm.roleKey" auto-complete="off"></el-input>
         </el-form-item>



      </el-col>

      <el-col :span="10">
        权限配置
        <permission-tree ref="addTree" :data="permisTreeData"></permission-tree>
        <!-- <el-tree
          ref="tree"
          :data="permisTreeData"
          show-checkbox
          node-key="id"
          :props="defaultProps">
        </el-tree> -->
      </el-col>

    </el-row>





    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave">确 定</el-button>
    </span>
  </el-dialog>

  <el-dialog
  title="角色修改"
  :visible.sync="permisDialogVisible"
  width="40%"
  >
  <el-form :model="roleEditForm" ref="roleEditValidateForm" label-width="100px">
    <el-row :gutter="20">
    <el-col :span="14">
      <el-form-item
        label="名称"
        prop="name"
        :rules="[{ required: true, message: '名称不能为空'}]"
      >
        <el-input v-model="roleEditForm.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="角色代码"
        prop="roleKey"
        :rules="[{ required: true, message: '角色代码不能为空'}]"
      >
        <el-input v-model="roleEditForm.roleKey" auto-complete="off"></el-input>
      </el-form-item>


    </el-col>

    <el-col :span="10">
      权限配置
      <permission-tree ref="updateTree" :data="permisTreeData" :defaultCheckedKeys="roleEditForm.permissions"></permission-tree>
      <!-- <el-tree
        ref="tree"
        :data="permisTreeData"
        show-checkbox
        node-key="id"
        :default-checked-keys="roleEditForm.permissions"
        :props="defaultProps">
      </el-tree> -->
    </el-col>

  </el-row>

  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="permisDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleEdit">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import util from '@/utils/util'
import PermissionTree from '../components/PermissionTree'
import { getRoles,addRole,deleteRole,getPermissions,updateRole } from '@/api/api'

export default {
  data() {
    return {
      list: null,
      dialogVisible:false,
      permisDialogVisible:false,
      roleForm:{
        groupId:0
      },
      roleEditForm:{

      },
      options: [{
           value: 0,
           label: '用户角色'
         }, {
           value: 1,
           label: '管理角色'
         }],
         permisTreeData: [],
         defaultProps: {
         children: 'children',
         label: 'name'
       }
    }

  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getRoles().then(data => {
        this.list = data
      })
    },
    showAddRoleDialog(){

        this.permisTreeData = []
        this.roleForm.groupId = 0;
        this.getPermisData(0);
        this.dialogVisible = true;
        if(this.$refs.tree){
          this.$refs.tree.setCheckedKeys([]);
        }

    },
    handleEdit(){
         this.roleEditForm.permissions = this.$refs.updateTree.getAllCheckedKeys();
         updateRole(this.roleEditForm).then(data => {
             this.permisDialogVisible = false;
             this.init()
         })
    },
    handleSave(){
      this.$refs.roleValidateForm.validate((valid) => {

        if(valid) {
          this.roleForm.permissions = this.$refs.addTree.getAllCheckedKeys();
          addRole(this.roleForm).then(data => {
            this.dialogVisible=false;
            this.init()
          })
        }

      });

    },
    handleDelete(row){
      deleteRole(row.id).then(data => {
        this.init()
      })
    },
    showEditRoleDialog(row){
      this.roleEditForm = row;
      this.permisTreeData = []
      this.getPermisData(row.groupId);
      this.permisDialogVisible = true;
    },
    getPermisData(groupId){
      getPermissions(groupId).then(data => {

              this.permisTreeData = util.listToTree('id','parentId', data)


      })
    },
    changeGroup(val){
      this.permisTreeData = []
      this.getPermisData(val);
    }
  },
  components: {
    PermissionTree
  }
}
</script>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
